<template>
  <div class="_wz_cent_main _wz_noticeList">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <Form :model="formDataSearch" label-position="right" :label-width="80" inline>
        <FormItem label="消息状态">
          <i-select v-model="formDataSearch.messageReadState" filterable placeholder="请选择消息状态" clearable>
            <Option :value="0">未读</Option>
            <Option :value="1">已读</Option>
          </i-select>
        </FormItem>
        <FormItem label="消息类型">
          <i-select v-model="formDataSearch.messageTypeCode" filterable placeholder="请选择消息类型" clearable>
            <Option :value="1">上级推送</Option>
            <Option :value="2">审批</Option>
            <Option :value="3">待办工作</Option>
            <Option :value="4">协办工作</Option>
            <Option :value="5">调度工作</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>

    <Card :bordered="true">
      <p slot="title">列表</p>
      <p slot="extra">
        <span>消息提醒</span>
        <i-switch style="margin: 0 10px;" v-model="messageRemind">
          <span slot="open">开</span>
          <span slot="close">关</span>
        </i-switch>
        <Button type="primary" @click="readList">全部已读</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>
  </div>
</template>
<script>


import wzTbale from "../../components/table/table";

export default {
  components: {
    wzTbale,//列表
  },
  data() {
    return {
      formDataSearch: {},
      // messageRemind:false,//消息提醒
      tableData: {
        url: this.apiUrl.webApi + "/system/message/page/list",//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: 'auto',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {
            title: '消息状态', width: 140, key: 'status',render: (h, params) => {
              return h('Tag', {props: {type: 'dot',color: (params.row.messageReadState == 1) ? "default" : "primary"}}, (params.row.messageReadState == 1) ? "已读" : "未读")
            }
          },
          {title: '消息类型', width: 100, key: 'messageTypeValue'},
          {title: '消息标题', width: 200, key: 'messageTitle'},
          {title: '消息内容', minWidth: 160, key: 'messageContent'},
          {title: '消息时间', width: 160, key: 'createTime'},
          {
            title: '操作', fixed: 'right', width: 100,
            render: (h, params) => {
              let operationButtons = [];
              //已读
              if(params.row.messageReadState != 1){
                operationButtons.push(
                  h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    on: {
                      click: () => {
                        var that = this;
                        that.axios.post(that.apiUrl.webApi + "/system/message/read", {id: params.row.id}).then(res => {
                          if (!!res) {
                            that.$store.dispatch("setMessageState");
                            that.$refs.wzTbale.tableLoadData();
                          }
                        }).catch(err => {
                          console.log("失败", err)
                        })
                      }
                    }
                  }, '已读')
                );
              }
              return h('div', operationButtons);
            }
          },
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },

    }
  },

  computed: {//计算属性
    messageRemind:{//
      get(){
        return this.$store.getters.getMessageRemind;
      },
      set(val){
        sessionStorage.setItem("messageRemind", val)
        this.$store.dispatch("setMessageRemind",val)
      }
    }
  },
  beforeCreate() {//beforeCreate创建前状态


  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程


  },
  mounted() {//mounted 挂载结束状态


  },
  methods: {//执行的方法
    searchSubmit() {//搜索
      this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
      this.tableData.where.deptId = this.deptId;
      this.$refs.wzTbale.tableLoadData(true)
    },
    readList(){
      var that = this;
      that.axios.post(that.apiUrl.webApi + "/system/message/all/read", {}).then(res => {
        if (!!res) {
          that.$store.dispatch("setMessageState");
          that.$refs.wzTbale.tableLoadData();
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="less">
._wz_noticeList {
  display: flex;
  flex-direction: column;
}
</style>

